<template>
  <div class="signin register">
    <div class="clearfix">
      <div class="fl signin-le">
        <div class="logo-a">
          <a href="/">
            <img src="@/assets/img/logo1.svg" alt="" />
          </a>
        </div>
        <div class="tile-en">
          Creativity
          <br />Empowering your <br />
          business
        </div>
        <div class="tile-cn">
          用更好的创意
          <br />为您的企业赋能
        </div>
      </div>
      <div class="fr signin-re">
        <div class="signin-box">
          <p class="signin-title">创建账户</p>
          <div class="signin-cjzh">已经有帐户？ <a href="/sign">登录</a></div>
          <!-- <form>
            <ul class="signin-ul">
              <li>
                <p>手机号</p>
                <input type="text" placeholder="手机号/用户名/电子邮件" />
              </li>
              <li class="possword">
                <p>密码</p>
                <input type="text" placeholder="密码" />
              </li>
              <li class="code-li">
                <p>验证码</p>
                <input type="text" />
                <button class="gain-btn">获取验证码</button>
              </li>
              <li class="check-li">
                <div class="form-check">
                  <input type="checkbox" class="form-check-input" id="exampleCheck1" />
                  <label class="form-check-label"
                    for="exampleCheck1">本人确认已仔细阅读并充分理解《个人信息保护政策》与《网站使用条款》的全部内容，同意接受上述协议的全部内容</label>
                </div>
              </li>
              <li class="sign-btn">
                <button>创建账户</button>
              </li>
              <li class="other-li">
                <span> 其他方式登录</span>
              </li>
              <li class="wexin-li">
                <span @click="show">
                  <i class="iconfont icon-weixin"></i>
                </span>
              </li>
            </ul>
          </form> -->



          <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" class="demo-loginForm">
            <p>手机号</p>
            <!-- 手机号 -->
            <el-form-item prop="mobile">
              <el-input type="text" v-model="loginForm.mobile" autocomplete="off" placeholder="手机号/用户名/电子邮件">
              </el-input>
            </el-form-item>

            <p>密码</p>
            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input type="password" v-model.number="loginForm.password" placeholder="密码"
                @keydown.enter="submitForm('loginForm')"></el-input>
            </el-form-item>

            <!-- 验证码 -->
            <p>验证码</p>
            <el-form-item prop="code">
              <el-input type="text" v-model="loginForm.code" autocomplete="off">
              </el-input>

              <button class="sendCode" @click.prevent="handleSendCode" :disabled="isDisabled">{{ buttonTitle }}</button>

            </el-form-item>

            <!-- 勾选协议 -->
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="exampleCheck1" v-model="agreementChecked" />
              <label class="form-check-label"
                for="exampleCheck1">本人确认已仔细阅读并充分理解《个人信息保护政策》与《网站使用条款》的全部内容，同意接受上述协议的全部内容</label>
            </div>


            <!-- 注册按钮 -->
            <el-form-item class="login">
              <el-button type="primary" @click="submitForm('loginForm')" :disabled="!agreementChecked">创建用户</el-button>
            </el-form-item>
          </el-form>

        </div>
      </div>
    </div>
    <!--  二维码登录-->
    <QrLogin ref="qrogin"></QrLogin>
  </div>
</template>
<script>
import QrLogin from '@/components/QrLogin.vue'
import * as api from "@/api/users"
import { ElLoading } from "element-plus"
import { ElMessageBox } from 'element-plus'


var validateUsername = (rule, value, callback) => {
  var uPattern = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
  // 如果校验通过，直接回调callback（）
  // 如果校验不通过，callback中传参数
  if (uPattern.test(value)) {
    callback()
  } else {
    callback('请输入正确手机号码')
  }
};
// 校验密码
var validatePassword = (rule, value, callback) => {
  if (value) {
    callback()
  } else {
    callback('请输入密码')
  }
};
// 校验验证码
var validateCode = (rule, value, callback) => {
  if (value) {
    callback()
  } else {
    callback('请输入验证码')
  }
}


export default {
  components: {
    QrLogin
  },

  data() {
    return {
      loginForm: {
        mobile: '',
        password: '',
        code: ''
      },

      // 选择框勾选
      agreementChecked: false,

      // 剩余时间
      remainTime: 0,

      // 定时器id
      intervalId: null,

      isDisabled: false,



      rules: {
        mobile: [
          { validator: validateUsername, trigger: 'blur' }
        ],
        password: [
          { validator: validatePassword, trigger: 'blur' }
        ],
        code: [
          {
            validator: validateCode, trigger: 'blur'
          }
        ],
      }
    }
  },
  computed: {
    // isDisabled() {
    //   return this.remainTime > 0
    // },
    buttonTitle() {
      if (this.remainTime > 0) {
        return `${this.remainTime}s 后重试 `
      } else {
        return '获取验证码'
      }
    }
  },


  methods: {
    async show() {
      this.$refs.qrogin.isshow = true
    },





    // 表单校验
    submitForm(formName) {

      this.$refs[formName].validate((valid) => {
        if (valid) {

          const loading = ElLoading.service({
            lock: true,
            text: '正在注册...',
            background: 'rgba(0,0,0,0.7)'
          })

          // 勾选之后
          if (this.agreementChecked) {
            // 本地校验通过
            let { mobile, password, code } = this.loginForm
            // 注册接口
            api.registerApi(mobile, password.toString(), code)
              .then(res => {
                console.log(res);

                if (res.data.code === 1) {
                  this.$message({
                    message: '恭喜你,注册成功',
                    type: 'success'
                  });
                  loading.close()
                  this.$router.push('/sign')
                } else {
                  ElMessageBox({
                    title: '错误提示',
                    type: 'error',
                    message: res.data.msg,

                  })
                }
              })
              .catch()
          }

        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },



    // 获取验证码接口
    async getSendCode(mobile) {
      try {
        let res = await api.sendCodeApi(mobile)
        console.log(res, '获取验证码');
      } catch (e) {
        console.log(e);

      }
    },

    // 点击获取验证码
    handleSendCode() {

      this.getSendCode(this.loginForm.mobile)


      this.isDisabled=true

      if (this.remainTime > 0) {
        return;
      }
      this.remainTime = 60; // 设置初始剩余时间为60秒
      this.intervalID = setInterval(() => {
        this.remainTime--;

        if (this.remainTime === 0) { // 如果倒计时结束则恢复按钮状态
          clearInterval(this.intervalID);
          this.intervalID = null;
          this.isDisabled=false
        }
      }, 1000);



    }



  }
}
</script>



<style scoped lang="less">
.sendCode {
  cursor: pointer;
  color: blue;
}
</style>